<template>
  <div>
    <span class="k-textbox k-space-right" style="width: 100%;border:none">
      <kendo-maskedtextbox v-model="value" :name="name" :required="required" type="text" style="width:100%" @input="handleInput" />
      <a class="k-icon k-i-search" @click="onClick">&nbsp;</a>
    </span>
  </div>
</template>

<script>
  export default {
    name: 'ReadonlySearch',
    props: {
      onClick: {
        type: [Function, String],
        default() {
          return ''
        }
      },
      name: {
        type: String,
        default: ''
      },
      required: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        value: ''
      }
    },
    methods: {
      handleInput() {
        this.$emit('input', this.value) // key code
      }
    }
  }
</script>

<style>

</style>
